<template>
  <el-dialog
    v-model="dialogVisible"
    title="文件夹属性"
    width="400px"
    destroy-on-close
  >
    <el-descriptions :column="1" border style="padding-bottom: 20px;">
      <el-descriptions-item label="名称">{{ folderInfo?.name }}</el-descriptions-item>
      <el-descriptions-item label="路径">{{ folderInfo?.path }}</el-descriptions-item>
      <el-descriptions-item label="完整路径">{{ folderInfo?.full_path }}</el-descriptions-item>
      <el-descriptions-item label="创建时间">{{ folderInfo?.created_time }}</el-descriptions-item>
      <el-descriptions-item label="文件数量">{{ folderInfo?.file_count }}</el-descriptions-item>
      <el-descriptions-item label="文件夹数量">{{ folderInfo?.folder_count }}</el-descriptions-item>
      <el-descriptions-item label="总大小">{{ formatSize(folderInfo?.total_size) }}</el-descriptions-item>
    </el-descriptions>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { FolderInfo } from '../types'

const props = defineProps<{
  modelValue: boolean
  folderInfo: FolderInfo | null
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
}>()

const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

// 格式化文件大小
const formatSize = (size?: number) => {
  if (!size) return '0 B'
  const units = ['B', 'KB', 'MB', 'GB', 'TB']
  let index = 0
  let fileSize = size

  while (fileSize >= 1024 && index < units.length - 1) {
    fileSize /= 1024
    index++
  }

  return `${fileSize.toFixed(2)} ${units[index]}`
}
</script> 